
.whole {
    max-width: 640px;
    min-width: 300px;
    width: 100%;
    height: 1000px;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
}
.whole .back-01 {
    width: 100%;
    height: 1136px;
    position: absolute;
    z-index: -1;
}
/*射灯*/
.whole .spotlight-l ,
.whole .spotlight-r{

    width: 100%;
    position: absolute;
    top:0;
    left: 0;
    transition: all 1s;
    z-index: 1;

}
.whole .spotlight-l {

    transform-origin: left top;
    animation: run1 2s linear 0.5s  infinite;

}
.whole .spotlight-r {
    transform-origin: right top;
    animation: run 2s linear 0.5s  infinite;
}

.whole .spotlight-l  img,
.whole .spotlight-r img {
    width: 100%;
}

@keyframes run {
    0% {

    }
    50% {
        transform: rotate(-25deg);
    }
    100% {
        transform: rotate(0deg);
    }

}
@keyframes run1 {
    0% {

    }
    50% {
        transform: rotate(30deg);
    }
    100% {
        transform: rotate(0deg);
    }

}

/*射灯*/
/*旋转风车*/
.whole .windmill {

    position: absolute;
    z-index: 2;
    top:32px;
    right:40px;
    animation:mill 2s   linear infinite;


}

.whole .windmill4{
    position: absolute;
    z-index: 2;
    top:66px;
    right:73px;
}
@keyframes mill {
    0% {

    }

    100% {
        transform: rotateZ(360deg);
    }

}

/*跳动下键*/
.whole .bounce {
    width: 12%;
    position: absolute;
    left: 44%;
    bottom: 16%;
    z-index: 77;
     /*transform: translateY(-200px);*/
    animation:bounce 2s linear infinite;
}
.whole .bounce img{
    width:100%;
    height: 100%;

}
@keyframes bounce {
    0%{}
    20%{transform:translateY(5px); }
    50%{transform:translateY(0);}
    70% {transform:translateY(-5px);}
    100% {transform:translateY(0);}

}
    /*跳动下键*/



/*1-4屏*/
.wrapper {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 33;
}

.wrapper .tab {
    height: 349px;
    width: 8%;
    float: right;
    margin: 150px 10px 0 0;
    padding: 148px 10px;
    position: absolute;
    top:0;
    right:0;
    z-index: 33;
  }
.wrapper .tab .back-02{
    position: absolute;
    top:0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}
.wrapper .tab li {
    width: 100%;
    height: 10%;
margin: 15px 0 0 0;
    cursor: pointer;

}
.wrapper .tab li img{
    width: 100%;
    height: 100%;
}


.wrapper .products {
    width: 100%;
    height: 100%;
    position: absolute;

}
.wrapper .products .main {

    width: 100%;
    height: 1135px;
    display:none;
}
.wrapper .products .main.selected {
    display:block;
}

/*第一屏*/
/*旋转圆形*/
.wrapper .products .main:nth-child(1) .rotational {
    width: 39%;
    position: absolute;
    top:24%;
    left: 31%;
    /*transform: rotateZ(360deg);*/
    animation: rotational 3s linear infinite;
}
.wrapper .products .main:nth-child(1) .rotational img {
    width: 100%;
    height: 100%;
}
@keyframes rotational {
    0%{
        transform:rotateZ(40deg) ;
    }
    10%{
        transform:rotateZ(20deg) ;

    }
    20%{
        transform:rotateZ(0deg) ;

    }
    30%{
        transform:rotateZ(-20deg) ;
    }
    40%{
        transform:rotateZ(-40deg) ;
    }
    60%{
        transform:rotateZ(-20deg) ;
    }
    70%{
        transform:rotateZ(0deg) ;
    }
    80%{
        transform:rotateZ(20deg) ;
    }
    90%{
        transform:rotateZ(40deg) ;
    }

}
/*旋转圆形*/

/*大风车*/
.wrapper .products .main:nth-child(1) .Pinwheel {
    width: 79%;
    position: absolute;
    top:30%;
    left: 10%;
    /*transform: rotateZ(360deg);*/
    animation: Pinwheel 1.3s linear infinite;
}
.wrapper .products .main:nth-child(1) .Pinwheel img {
    width: 100%;
    height: 100%;
}
@keyframes Pinwheel  {
    0%{}
    100%{
        transform: rotateZ(360deg);
    }
}
/*大风车*/

/*一对*/
.wrapper .products .main:nth-child(1) .twain {
    width: 53%;
    position: absolute;
    top:30%;
    left: 24%;
    animation: twain 2s linear infinite;
}
.wrapper .products .main:nth-child(1) .twain img {
    width: 100%;
    height: 100%;
}
@keyframes twain {
    0%{

    }
    50%{
       transform: rotateY(20deg);
    }

    100%{
        transform: rotateY(10deg);
    }


}
/*一对*/

/*头像-*/
.wrapper .products .main:nth-child(1) .portrait {
    width: 38%;
    border-radius: 50%;
    position: absolute;
    top:27.5%;
    left: 30%;
    z-index: 2;
    /*transition: 1s all;*/
    /*transform: translate(0,-200px);*/
    animation: portrait 3s ,portrait1 2s  2s;


}


.wrapper .products .main:nth-child(1) .portrait img {
    width: 100%;
    height: 100%;
}
@keyframes portrait {
    0%{ }
    20%{transform: translate(0,-600px);}
    40%{transform: translate(0,0);}
    100%{transform: translate(0,0); }

}
@keyframes portrait1 {
    0%{ }
    100%{  transform:rotateZ(360deg) ; }

}
/*头像-*/

/*瞄准器*/
.wrapper .products .main:nth-child(1) .gunsight {
    width: 63%;
    position: absolute;
    top:22%;
    left: 18%;
    animation:gunsight1 1s  linear infinite,gunsight 1s 4s linear infinite ;
}
.wrapper .products .main:nth-child(1) .gunsight img {
    width: 100%;
    height: 100%;
}

@keyframes gunsight1 {
    0%{}
    100%{transform: rotate(90deg)}
}

@keyframes gunsight {
    0%{}
    50%{transform: scale(0.9)}
    70%{transform: scale(1)}
   100%{transform: scale(0.9)}
}

/*瞄准器*/

/*个人资料信息*/
.wrapper .products .main:nth-child(1) .inforr1{
    width: 20%;
    position: absolute;
    top:29%;
    left: 12%;
    transition: 0.5s all;
    transform: translateX(-200px) ;
}
.wrapper:hover .products .main:nth-child(1) .inforr1{
    transform: translateX(0) ;
}
.wrapper .products .main:nth-child(1) .inforr1 img{
    width: 100%;
    height: 100%;
}

.wrapper .products .main:nth-child(1) .inforr2{
    width: 20%;
    position: absolute;
    top:37%;
    left: 11%;
    transition: 1.8s all;
    transform: translateX(-200px) ;
}
.wrapper:hover .products .main:nth-child(1) .inforr2{
    transform: translateX(0) ;
}
.wrapper .products .main:nth-child(1) .inforr2 img{
    width: 100%;
    height: 100%;
}

.wrapper .products .main:nth-child(1) .inforr3{
    width: 18%;
    position: absolute;
    top:34%;
    right: 15%;
    transition: 3.1s all;
    transform: translateX(200px) ;
}
.wrapper:hover .products .main:nth-child(1) .inforr3{
    transform: translateX(0) ;
}
.wrapper .products .main:nth-child(1) .inforr3 img{
    width: 100%;
    height: 100%;
}

/*个人信息*/
.wrapper .products .main:nth-child(1) .inforr{
    width: 28%;
    position: absolute;
    top:45%;
    left: 36%;
    transition: 4s all;
    transform: translateX(400px) ;

}
.wrapper:hover .products .main:nth-child(1) .inforr{
    transform: translateY(0) ;

}

.wrapper .products .main:nth-child(1) .inforr img{
    width: 100%;
    height: 100%;
}
@keyframes inforr {
    0%{}
    100%{
        transform: rotateY(360deg);
    }
}

.wrapper .products .main:nth-child(1) .line {
    width: 100%;
    position: absolute;
    top:69%;
    left:0 ;
    animation: line 2s linear infinite ;

}
.wrapper .products .main:nth-child(1) .line img {
    width: 100%;
    height: 100%;
}
@keyframes line {
    0%{}
    25%{

    }
    50%{}
    75%{}
    100%{transform:  rotateX(360deg);}


}
/*个人资料信息*/

/*年份*/
.wrapper .products .main:nth-child(1) .year {
    width: 25%;
    position: absolute;
    top:72%;
    left: 38%;
    animation: year 3s linear infinite infinite;
}
.wrapper .products .main:nth-child(1) .year img{
    width: 100%;
    height: 100%;
}
@keyframes year {
    0%{}
    100%{
        transform: rotateX(-360deg);
    }


}
/*年份*/

/*名句*/
.wrapper .products .main:nth-child(1) .pic6{
    width: 23%;
    position: absolute;
    top:64%;
    left: 16%;
    transition: 1s all;
    transform: translateY(-800px) ;
    animation: pic6 6s 2s linear infinite;
}
.wrapper:hover .products .main:nth-child(1) .pic6{
    transform: translateY(0) ;
}
.wrapper .products .main:nth-child(1) .pic6 img {
    width: 100%;
    height: 100%;
}
@keyframes pic6 {
    0%{}
    50%{ transform: translateX(-50px) ; }
    100%{transform: translateX(0) ;  }


}

.wrapper .products .main:nth-child(1) .pic7{

    width: 44%;
    position: absolute;
    top:65%;
    left: 41%;
    transition: 1s all;
    transform: translateY(400px) ;
    animation: pic6 6s 2s linear infinite;
}
@keyframes pic7 {
    0%{}
    50%{ transform: translateX(50px) ; }
    100%{transform: translateX(0) ;  }


}
.wrapper:hover .products .main:nth-child(1) .pic7{
    transform: translateX(0) ;
}
.wrapper .products .main:nth-child(1) .pic7 img {
    width: 100%;
    height: 100%;
}
/*名句*/

/*第一屏*/

/*第二屏*/
.wrapper .products .main:nth-child(2) .skill{
    width: 92%;
    position: absolute;
    top:1%;
    left: 4%;
}
.wrapper .products .main:nth-child(2) .skill img {
    width: 100%;
    height: 100%;
}

.wrapper .products .main:nth-child(2) .box1 {
    width: 68%;
    position: absolute;
    top:16%;
    left: 5%;
}
.wrapper .products .main:nth-child(2) .box1 img {
    width: 100%;
    height: 100%;
}

.wrapper .products .main:nth-child(2) .box1 .surgingline{
    width: 93%;
    position: absolute;
    top:32%;
    left: 5%;
}

.wrapper .products .main:nth-child(2) .box1 .surgingline img {
    width: 100%;
    height: 100%;

    animation: surgingline 2s linear infinite;
}
@keyframes surgingline  {
    0%{}
    100%{
       transform: rotateX(360deg);;
    }


}
.wrapper .products .main:nth-child(2) .box1 .c3 {
    width: 61%;
    position: absolute;
    top:8%;
    left: 38%;
    animation: c3 2s  linear infinite;
}
.wrapper .products .main:nth-child(2) .box1 .c3 img {
    width: 100%;
    height: 100%;
}
@keyframes c3 {
    0%{}
    10%{
        transform:translateX(-100px) ;
    }
    20%{
        transform:translateX(-80px) ;
    }
    30%{
        transform:translateX(-60px) ;
    }
    40%{
        transform:translateX(-40px) ;
    }
    50%{
        transform:translateX(0px) ;
    }
    60%{
        transform:translateX(-40px) ;
    }
    70%{
        transform:translateX(-60px) ;
    }
}



.wrapper .products .main:nth-child(2) .box2 {
    width: 68%;
    position: absolute;
    top:50%;
    left: 5%;
}
.wrapper .products .main:nth-child(2) .box2 img {
    width: 100%;
    height: 100%;
    /*position: absolute;*/
}
.wrapper .products .main:nth-child(2) .box2 video{
    width: 91%;
    height: 100%;
    position: absolute;
    top:-6%;
    left: 3%;
}

.wrapper .products .main:nth-child(2) .line1 {
    width: 8%;
    position: absolute;
    top:15%;
    left: 70%;
}
.wrapper .products .main:nth-child(2) .line1 img {
    width: 100%;
    height: 100%;
}
.wrapper .products .main:nth-child(2) .line2 {
    width: 11%;
    height: 30%;
    position: absolute;
    top:31%;
    left: 70%;
}
.wrapper .products .main:nth-child(2) .line2 img {
    width: 100%;
    height: 100%;
}
.wrapper .products .main:nth-child(2) .htm5 {
    width: 52%;
    position: absolute;
    top:-17%;
    left: -4%;
    animation: htm6 2s  linear infinite,htm5 2s 2s linear infinite;
}
.wrapper .products .main:nth-child(2) .htm5 img {
    width: 100%;
    height: 100%;
}
@keyframes htm5 {
    0%{}
    20%{
    transform:translateY(5px) ;}
    40%{
        transform:translateY(8px) ;
    }
}
@keyframes htm6{
    0%{}
    100%{
        transform:rotateX(360deg);}

}

.wrapper .products .main:nth-child(2) .wheel {
    width: 9%;
    position: absolute;
    top:97.5%;
    left: 14%;
}

.wrapper .products .main:nth-child(2) .wheel .pic-1{
    width: 100%;
}
.wrapper .products .main:nth-child(2) .wheel .pic-1 img{
    width: 100%;
}

.wrapper .products .main:nth-child(2) .wheel .pic-2{
    width: 100%;
    position: absolute;
    top:0%;
    left: 113%;
}
.wrapper .products .main:nth-child(2) .wheel .pic-2 img{
    width: 100%;
}

.wrapper .products .main:nth-child(2) .wheel .pic-3{
    width: 100%;
    position: absolute;
    top:0%;
    left: 222%;
}
.wrapper .products .main:nth-child(2) .wheel .pic-3 img{
    width: 100%;
}

.wrapper .products .main:nth-child(2) .wheel .pic-4{
    width: 141%;
    position: absolute;
    top:-16%;
    left: 83%;
}
.wrapper .products .main:nth-child(2) .wheel .pic-4 img{
    width: 100%;
}

/*第二个风轮*/
.wrapper .products .main:nth-child(2) .wheell {
    position: absolute;
    top:-7.5%;
    left: 56%;
}
.wrapper .products .main:nth-child(2) .wheel .pic-04 {
    position: absolute;
    top:0%;
    left: 0%;
}

.wrapper .products .main:nth-child(2) .wheel .pic-00{
    animation: pic-00 1s  linear infinite;
}
@keyframes pic-00 {
    0%{}
    100%{
        transform: rotateZ(360deg);

    }

}
/*第二屏*/

/*第三屏*/
.wrapper .products .main:nth-child(3) .web-skl {
    width: 66%;
    position: absolute;
    top:10%;
    left: 15%;
}
.wrapper .products .main:nth-child(3) .web-skl img {
    width: 100%;
    height: 100%;
}
/*.wrapper .products .main:nth-child(3) .loading {*/
    /*width: 73%;*/
    /*!*height: 100%;*!*/
    /*position: absolute;*/
    /*top:30%;*/
    /*left: -9%;*/
    /*border: 1px solid red;*/
/*}*/

.wrapper .products .main:nth-child(3)  .plug {
    width: 27%;
    position: absolute;
    top:29%;
    left: 4%;
}
.wrapper .products .main:nth-child(3)  .plug img {
    width: 100%;
    height: 100%;
}

/*.wrapper .products .main:nth-child(3) .skill-noe {*/
    /*width: 41%;*/
    /*position: absolute;*/
    /*top:0%;*/
    /*left: 48%;*/
/*}*/
/*jquery*/
.wrapper .products .main:nth-child(3) .pic19 {
    width: 100%;
    position: absolute;
    top:-6%;
    left: 84%;
}
.wrapper .products .main:nth-child(3) .pic19 img {
    width: 100%;
    height: 100%;
}
.wrapper .products .main:nth-child(3) .pic20 {
    width: 150%;
    position: absolute;
    top:0.5%;
    left: 87%;
}
.wrapper .products .main:nth-child(3) .pic20 img {
    width: 100%;
    height: 100%;
}
.wrapper .products .main:nth-child(3) .pic21 {
    width: 61%;
    position: absolute;
    top:-2.5%;
    left: 239%;
}
.wrapper .products .main:nth-child(3) .pic21 img {
    width: 100%;
    height: 100%;
}

/*javascript*/
.wrapper .products .main:nth-child(3) .pic22 {
    width: 134%;
    position: absolute;
    top:15%;
    left: 92%;
}
.wrapper .products .main:nth-child(3) .pic22 img {
    width: 100%;
    height: 100%;
}
.wrapper .products .main:nth-child(3) .pic23 {
    width: 155%;
    position: absolute;
    top:20%;
    left: 91%;
}
.wrapper .products .main:nth-child(3) .pic23 img {
    width: 100%;
    height: 100%;
}
.wrapper .products .main:nth-child(3) .pic24 {
    width: 61%;
    position: absolute;
    top: 17.5%;
    left: 239%;
}
.wrapper .products .main:nth-child(3) .pic24 img {
    width: 100%;
    height: 100%;
}

/*html+css*/
.wrapper .products .main:nth-child(3) .pic25 {
    width: 129%;
    position: absolute;
    top:35%;
    left: 90%;
}
.wrapper .products .main:nth-child(3) .pic25 img {
    width: 100%;
    height: 100%;
}
.wrapper .products .main:nth-child(3) .pic26 {
    width: 154%;
    position: absolute;
    top:40%;
    left: 89%;
}
.wrapper .products .main:nth-child(3) .pic26 img {
    width: 100%;
    height: 100%;
}
.wrapper .products .main:nth-child(3) .pic27 {
    width: 61%;
    position: absolute;
    top: 36.5%;
    left: 239%;
}
.wrapper .products .main:nth-child(3) .pic27 img {
    width: 100%;
    height: 100%;
}

/*bootstrap*/
.wrapper .products .main:nth-child(3) .pic28 {
    width: 141%;
    position: absolute;
    top:54%;
    left: 93%;
}
.wrapper .products .main:nth-child(3) .pic28 img {
    width: 100%;
    height: 100%;
}
.wrapper .products .main:nth-child(3) .pic29 {
    width: 153%;
    position: absolute;
    top:59%;
    left: 93%;
}
.wrapper .products .main:nth-child(3) .pic29 img {
    width: 100%;
    height: 100%;
}
.wrapper .products .main:nth-child(3) .pic30 {
    width: 61%;
    position: absolute;
    top:56.5%;
    left: 239%;
}
.wrapper .products .main:nth-child(3) .pic30 img {
    width: 100%;
    height: 100%;
}

/*ajax*/
.wrapper .products .main:nth-child(3) .pic31 {
    width: 19%;
    position: absolute;
    top:54%;
    left: 31%;
}
.wrapper .products .main:nth-child(3) .pic31 img {
    width: 100%;
    height: 100%;
}
.wrapper .products .main:nth-child(3) .pic32 {
    width: 40%;
    position: absolute;
    top:56%;
    left: 30%;
}
.wrapper .products .main:nth-child(3) .pic32 img {
    width: 100%;
    height: 100%;
}
.wrapper .products .main:nth-child(3) .pic36 {
    width: 17%;
    position: absolute;
    top:55%;
    left: 68%;
}
.wrapper .products .main:nth-child(3) .pic36 img {
    width: 100%;
    height: 100%;
}

/*angularjs*/
.wrapper .products .main:nth-child(3) .pic33 {
    width: 36%;
    position: absolute;
    top:60.5%;
    left: 31%;
}
.wrapper .products .main:nth-child(3) .pic33 img {
    width: 100%;
    height: 100%;
}
.wrapper .products .main:nth-child(3) .pic34 {
    width: 40%;
    position: absolute;
    top:62.5%;
    left: 29%;
}
.wrapper .products .main:nth-child(3) .pic34 img {
    width: 100%;
    height: 100%;
}
.wrapper .products .main:nth-child(3) .pic35 {
    width: 17%;
    position: absolute;
    top:62%;
    left: 68%;
}
.wrapper .products .main:nth-child(3) .pic35 img {
    width: 100%;
    height: 100%;
}

/*angularjs*/

/*第三屏*/

/*第四屏*/


.wrapper .products .main:nth-child(4) .tell {
    width: 41%;
    position: absolute;
    top:32%;
    left: 25%;
}
.wrapper .products .main:nth-child(4) .tell img{
    width: 100%;
    height: 100%;
}

.wrapper .products .main:nth-child(4) .benpa {
     width: 37%;
     position: absolute;
     top:37%;
     left: 8%;
 }
.wrapper .products .main:nth-child(4) .benpa img{
    width: 100%;
    height: 100%;
}
.wrapper .products .main:nth-child(4) .yhao {
    width: 37%;
    position: absolute;
    top:37%;
    left: 47%;
}
.wrapper .products .main:nth-child(4) .yhao img{
    width: 100%;
    height: 100%;
}
.wrapper .products .main:nth-child(4) .distant {
     width: 74%;
     position: absolute;
     top:45%;
     left: 11%;
 }
.wrapper .products .main:nth-child(4) .distant img{
    width: 100%;
    height: 100%;
}
.wrapper .products .main:nth-child(4) .Twon {
    width: 40%;
    position: absolute;
    top:50%;
    left: 44%;
}
.wrapper .products .main:nth-child(4) .Twon img{
    width: 100%;
    height: 100%;
}
.wrapper .products .main:nth-child(4) .thanks {
    width: 45%;
    position: absolute;
    bottom:17%;
    left: 28%;
    animation: thanks 1.5s linear infinite;
}
.wrapper .products .main:nth-child(4) .thanks img{
    width: 100%;
    height: 100%;
}
@keyframes  thanks{
    0%{}
    100%{
        transform: scale(1.2,1.2);
    }

}

.wrapper .products .main:nth-child(4) .arovanen {
    width: 86%;
    position: absolute;
    bottom:73%;
    left: 5%;
    animation: arovanen 1.5s linear infinite;
}
.wrapper .products .main:nth-child(4) .arovanen img{
    width: 100%;
    height: 100%;
}
.wrapper .products .main:nth-child(4) .arovanen2 {
    width: 57%;
    position: absolute;
    bottom:34%;
    left: 19%;
    animation: arovanen 1s linear infinite;
}
.wrapper .products .main:nth-child(4) .arovanen3 {
    width: 34%;
    position: absolute;
    bottom:19%;
    left: -4%;
    animation: arovanen 1.5s linear infinite;
}
.wrapper .products .main:nth-child(4) .arovanen4 {
    width: 36%;
    position: absolute;
    bottom:47%;
    left: 4%;
    animation: arovanen 2s linear infinite;
}
@keyframes arovanen {
    0%{}
    100%{
        transform: rotateZ(360deg);
    }
}
/*第四屏*/




